@charset "utf-8";

/* 建立一个盒子模型区域，大小400x400 */
div{
	width: 400px;
	height: 400px;
}
/* 引入边框图像 */
div{
	/*border-image-source: url(border.png);*/
}
/* 单单引入边框图像，webkit 引擎下的浏览器会在盒子区块的四个角看到一丁点图像的影子。
而其它浏览器什么都看不到，这是由于没有设置边框背景图像的宽度导致的 */
/* 设置边框图像宽度，上右下左，可以设置四个值 */
div{
	/*border-image-width: 81px;*/
}
/* 这里设置的是边框图像的宽度，而不是边框宽度。当你设置边框宽度，你会发现，文本会偏移。而边框图像的宽度不会挤压文本 */
div{
	/*border: solid 81px silver;*/
}
/* 以上设置完毕后，支持边框背景图片的浏览器会出现四个角落铺上这张图片的完整形式。这个时候需要通过引入切割属性来配置背景图片的显示方式 */
div{
	/* 边框图像宽度设置为 27px 和一个单格宽高一致 */
	/*border-image-width: 27px;*/
	/* 设置切割属性的大小，这里设置的值不需要加 px，因为它默认就是像素。 */
	/*border-image-slice:27;*/

	/* 设置 27 之后，会发现边框的四个角正好是橘红色的色个角。那么可以逐步放大或逐步缩小这个值，看下变化 */
	/* 放大到 81，四个角都慢慢缩小，各自显示一个完整的图像 */
	/*border-image-slice: 81;*/
	/* 缩小到0，发现四个角漫漫变大，配合 fill 整体显示一个完整图像 */
	/*border-image-slice: 0 fill;*/

	/* 上面只是单独设置一个像素表示四个边切割的大小，也可以设置百分比、浮点值或分别设置四个边的大小 */
	/* 81的 33.5% 差不多是 27 */
	/*border-image-slice: 33.5%; */
	/* 上下设置为27，左右设置为 0 */
	/*border-image-slice: 27 0;*/
	/* 上右下左，放别设置不同的值 */
	/*border-image-slice: 27 40 30 27;*/
}
/* 如果想要边框背景向外扩张，那么可以进行扩张设置 */
div{
	/*border-image-slice: 27;*/
	/* 向外扩张 20.5px， */
	/*border-image-outset: 20.5px;*/
}
/* 设置边的排列方式 */
div{
/*	width: 370px;
	height: 400px;
	border-image-source: url(border.png);
	border-image-width: 27px;
	border-image-slice: 27;*/
}
div{
	/* 拉伸方式填充，默认 */
	/*border-image-repeat: stretch;*/

	/* 平铺填充，超过则被截断，会发现当前上、下边有一个被截断 */
	/*border-image-repeat: repeat;*/

	/* 平铺填充，动态调整图片大小直至铺满 */
	/*border-image-repeat: round;*/

	/* 平铺填充，动态调整图片间距直至铺满，你会发现上、下两个边中有一些间隔线 */
	/*border-image-repeat: space;*/
}

/* 利用简写形式 */
div{
	/*border-image: url(border.png) 27/27px space;*/
}
/* 兼容模式 */
div{
	/*-webkit-border-image: url(border.png) 27/27px space;
	-moz-border-image: url(border.png) 27/27px space;
	-o-border-image: url(border.png) 27/27px space;
	border-image: url(border.png) 27/27px space;*/
}



























